<template>
	<view>
		<u-toast ref="uToast" />
		<u-swiper imgMode="scaleToFill" height="400rpx" :circular="true" :list="swiper" @click="toPage"></u-swiper>
		<!-- 		<view class="bg-img">
			<image src="../../static/image/smile.png" mode="center"></image>
		</view> -->
		<view class="container">
			<view class="search-box" @click="toSearch">
				<u-search :disabled="true" placeholder="搜索" shape="square" :show-action="false"
					searchIconColor="#4217FE" v-model="keyword" height="70rpx" searchIconSize="50" bgColor="#FFFFFF">
				</u-search>
				<!-- 				<view class="search">
					<input type="text" value="" placeholder="搜索" placeholder-style="color:#999" />
					<view class="icon">
						<u-icon name="search" color="#E76761" size="50"></u-icon>
					</view>
				</view> -->
			</view>
			<view class="hot-writer">
				<h3 class="">人气作者</h3>
				<u-scroll-list :indicator="indicator">
					<view class="writers" v-for="(item, index) in hotCreators" :key="index"
						@click="toCreatorIndex(item.id)">
						<image :src="item.avatar"></image>
						<view class="text">
							<text>{{item.word}}</text>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<hot :works="choiceness"></hot>
		</view>
	</view>
</template>

<script>
	import hot from "../../components/works/hot.vue"
	export default {
		components: {
			hot
		},
		data() {
			return {
				indicator: false,
				keyword: '', //搜索关键字
				hotCreators: [],
				swiper: [],
				choiceness: []
			}
		},
		onReady() {
			this.$refs.uToast.show({
				type: 'loading',
				title: '正在加载',
				message: "正在加载",
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
			})
		},
		onLoad() {
			this.getHotCreators()
			this.getChoiceness()
			this.getSwiper()
		},
		methods: {
			// 轮播图跳转页面
			toPage(index) {
				const item = this.swiper[index]
				// 0= 无动作 1=文章 2=指定作者主页 3=指定合辑
				if (item.jump_type != 0) {
					uni.navigateTo({
						url: item.toPage
					})
				}
			},
			// 轮播图
			getSwiper() {
				this.$api.getHomeSwiper().then((res) => {
					this.swiper = res.data
				})
			},
			// 热门作者
			getHotCreators() {
				this.$api.getHotCreators().then((res) => {
					this.hotCreators = res.data
				})
			},
			// 精选
			getChoiceness() {
				this.$api.getChoiceness().then((res) => {
					this.choiceness = res.data
					this.$refs.uToast.hide()
				})
			},
			// 跳转搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/fusearch'
				})
			},
			// 跳转作者主页
			toCreatorIndex(id) {
				uni.navigateTo({
					url: '/pages/creator/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// * {
	// 	margin: 0;
	// 	padding: 0;
	// 	box-sizing: border-box;
	// 	border-radius: 0;
	// }
	.container {
		z-index: 99;
		// padding: 0 12rpx 10rpx 12rpx;
		margin-top: -30rpx;
		position: absolute;
		width: 100%;
	}


	.bg-img {
		display: flex;
		justify-content: center;
	}

	.search-box {
		box-sizing: border-box;
		box-shadow: 0 0 30rpx #ccc;
		// background-color: #fff;
		border-radius: 10rpx;
		width: 96%;
		margin: auto;
	}

	.search {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		width: 660rpx;
		margin-left: 30rpx;
		border-radius: 80rpx;
		padding: 12rpx 0;
		overflow: hidden;
		box-sizing: border-box;
		line-height: 80rpx;

		input {
			width: 800rpx;
			font-size: 28rpx;
		}

		icon {
			// float: right;
			// margin-right: -60rpx;
		}
	}

	.result {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;

		.del {
			position: absolute;
			bottom: 0;
			right: 0;
		}

		text {
			display: block;
			padding: 4rpx 20rpx;
			background-color: #ccc;
			margin: 10rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 20rpx;
		}
	}

	.hot-writer {
		margin-top: 30rpx;
		text-align: center;

		h3 {
			font-size: 28rpx;
			font-weight: 600;
		}

		.writers {
			margin-top: 20rpx;
			text-align: center;

			image {
				width: 82rpx;
				height: 82rpx;
				border-radius: 100%;
				margin: 6rpx 12rpx 0rpx 10rpx;
			}
		}

		.text {
			font-size: 20rpx;
			margin-top: -10rpx;
		}
	}
</style>
